<template>
  <div>
    <el-form class="editInfo" ref="editInfo" :inline="false" :model="editInfo.data" :rules="editInfo.rules"
             size="small"
             label-width="120px">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="editInfo.data.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="editInfo.data.gender">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生日" prop="birthday">
            <el-date-picker
              v-model="editInfo.data.birthday"
              type="date"
              placeholder="生日"
              value-format="yyyy-MM-dd"
              style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="民族" prop="nation">
            <el-select v-model="editInfo.data.nation" placeholder="请选择民族">
              <el-option label="请选择民族" value=""></el-option>
              <el-option v-for="(item, index) in nationAllListData"
                         :key="`nation${index}`"
                         :label="item.dictLabel"
                         :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="婚姻状态" prop="maritalStatus">
            <el-select v-model="editInfo.data.maritalStatus" placeholder="请选择婚姻状态">
              <el-option label="请选择婚姻状况" value=""></el-option>
              <el-option v-for="(item, index) in marryAllListData"
                         :key="`maritalStatus${index}`"
                         :label="item.dictLabel"
                         :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证" prop="certNo">
            <el-input v-model="editInfo.data.certNo" placeholder="请输入身份证号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="籍贯" prop="nativePlace">
            <el-input v-model="editInfo.data.nativePlace" placeholder="请输入籍贯"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="户籍" prop="householdRegister">
            <el-input v-model="editInfo.data.householdRegister" placeholder="请输入户籍"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="政治面貌" prop="politicalStatus">
            <el-select v-model="editInfo.data.politicalStatus" placeholder="请选择政治面貌">
              <el-option label="请选择政治面貌" value=""></el-option>
              <el-option v-for="(item, index) in politicalAllListData"
                         :key="`politicalStatus${index}`"
                         :label="item.dictLabel"
                         :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="微信" prop="wechatId">
            <el-input v-model="editInfo.data.wechatId" placeholder="请输入微信号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话" prop="phone">
            <el-input v-model="editInfo.data.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="editInfo.data.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历" prop="education">
            <el-select v-model="editInfo.data.education" placeholder="请选择学历">
              <el-option label="请选择学历" value=""></el-option>
              <el-option v-for="(item, index) in educationAllListData"
                         :key="`${item.postName}${index}`"
                         :label="item.dictLabel"
                         :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="专业" prop="professional">
            <el-input v-model="editInfo.data.professional" placeholder="请输入专业"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="毕业院校" prop="graduatedUniversity">
            <el-input v-model="editInfo.data.graduatedUniversity" placeholder="请输入毕业院校"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="家庭住址" prop="address">
            <el-input type="textarea" v-model="editInfo.data.address" rows="1" placeholder="请输入家庭住址"
                      style="width: 480px;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系人" prop="emergencyContact">
            <el-input v-model="editInfo.data.emergencyContact" placeholder="请输入紧急联系人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系人电话" prop="emergencyContactPhone">
            <el-input v-model="editInfo.data.emergencyContactPhone" placeholder="请输入紧急联系人电话"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入职日期" prop="onboardingDate">
            <el-date-picker
              v-model="editInfo.data.onboardingDate"
              type="date"
              placeholder="入职日期"
              value-format="yyyy-MM-dd"
              style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="离职日期" prop="leaveDate">
            <el-date-picker
              :disabled="true"
              v-model="editInfo.data.leaveDate"
              type="date"
              placeholder="离职日期"
              value-format="yyyy-MM-dd"
              style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门" prop="deptId">
            <tree-select v-model="editInfo.data.deptId" :options="departmentAllListData"
                         :normalizer="treeSelectProps"
                         placeholder="选择部门"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职务:" prop="postId">
            <el-select v-model="editInfo.data.postId" placeholder="请选择职务">
              <el-option label="请选择职务" value=""></el-option>
              <el-option v-for="(item, index) in jobAllListData"
                         :key="`${item.postName}${index}`"
                         :label="item.postName"
                         :value="item.postId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自我评价" prop="selfEvaluation">
            <el-input type="textarea" v-model="editInfo.data.selfEvaluation" rows="3"
                      placeholder="请输入自我评价"
                      style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="教育经历" prop="educationExperience">
            <el-input type="textarea" v-model="editInfo.data.educationExperience" rows="3"
                      placeholder="请输入教育经历（例：2008.9-2012.6 某某大学）"
                      style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作经历" prop="workExperience">
            <el-input type="textarea" v-model="editInfo.data.workExperience" rows="3"
                      placeholder="请输入工作经历（例：2012.6-2015.6 某某公司）"
                      style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-form-item label="状态" prop="status">
        <el-radio-group v-model="editInfo.data.status" style="width: 178px;">
          <el-radio :label="0">在职</el-radio>
          <el-radio :label="1">离职</el-radio>
        </el-radio-group>
      </el-form-item>-->
    </el-form>
  </div>
</template>

<script>
  // import { debounce } from 'lodash'
  import { isIdentityCard } from '@/utils/validateIdcard'
  import isMobilePhone from 'validator/lib/isMobilePhone'
  import TreeSelect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import commonMixins from '@/mixins/common'

  export default {
    name: 'RecordEditBasic',
    mixins: [commonMixins],
    components: {
      TreeSelect
    },
    data() {
      return {
        dialog: {
          visible: false // 是否显示
        },
        formParams: { // 编辑需要的参数
          name: '', // 姓名
          gender: 1, // 性别 1男 2 女
          birthday: '', // 生日
          nation: '', // 民族
          maritalStatus: '', // 婚姻状态
          certNo: '', // 身份证
          nativePlace: '', // 籍贯
          householdRegister: '', // 户籍
          politicalStatus: '', // 政治面貌
          wechatId: '', // 微信
          phone: '', // 电话
          email: '', // 邮箱
          education: '', // 学历
          professional: '', // 专业
          graduatedUniversity: '', // 毕业院校
          address: '', // 家庭住址
          emergencyContact: '', // 紧急联系人
          emergencyContactPhone: '', // 紧急联系人电话
          onboardingDate: '', // 入职日期
          leaveDate: '', // 离职日期
          deptId: null, // 所属部门
          postId: null, // 职务
          selfEvaluation: '', // 自我评价
          educationExperience: '', // 教育经历
          workExperience: '', // 工作经历
          status: 0 // 状态 0 在职 1 离职
        },
        editInfo: { // 编辑表单
          id: undefined,
          data: {
            ...this.formParams
          },
          rules: {
            name: [
              { required: true, message: '请输入用户名', trigger: 'blur' }
            ],
            birthday: [
              { required: true, message: '请选择出生日期', trigger: 'change' }
            ],
            nation: [
              { required: true, message: '请选择民族', trigger: 'change' }
            ],
            maritalStatus: [
              { required: true, message: '请选择婚姻状态', trigger: 'change' }
            ],
            certNo: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入身份证'))
                  } else if (!isIdentityCard(value)) {
                    callback(new Error('请输入有效的身份证'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            nativePlace: [
              { required: true, message: '请输入籍贯', trigger: 'blur' }
            ],
            householdRegister: [
              { required: true, message: '请输入户籍', trigger: 'blur' }
            ],
            politicalStatus: [
              { required: true, message: '请选择政治面貌', trigger: 'change' }
            ],
            wechatId: [
              { required: true, message: '请输入微信号', trigger: 'blur' }
            ],
            phone: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入手机号码'))
                  } else if (!isMobilePhone(value, 'zh-CN')) {
                    callback(new Error('请输入有效的手机号码'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            email: [
              { required: true, message: '请输入邮箱', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱', trigger: ['blur', 'change'] }
            ],
            education: [
              { required: true, message: '请选择学历', trigger: 'change' }
            ],
            professional: [
              { required: true, message: '请输入专业', trigger: 'blur' }
            ],
            graduatedUniversity: [
              { required: true, message: '请输入毕业院校', trigger: 'blur' }
            ],
            address: [
              { required: true, message: '请输入家庭住址', trigger: 'blur' }
            ],
            emergencyContact: [
              { required: true, message: '请输入紧急联系人', trigger: 'blur' }
            ],
            emergencyContactPhone: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入紧急联系人电话'))
                  } else if (!isMobilePhone(value, 'zh-CN')) {
                    callback(new Error('请输入有效的手机号码'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            onboardingDate: [
              { required: true, message: '请选择入职日期', trigger: 'change' }
            ],
            deptId: [
              { required: true, message: '请选择所属部门', trigger: 'change' }
            ],
            postId: [
              { required: true, message: '请选择职务', trigger: 'change' }
            ],
            selfEvaluation: [
              { required: true, message: '请输入自我评价', trigger: 'blur' }
            ],
            educationExperience: [
              { required: true, message: '请输入输入教育经历', trigger: 'blur' }
            ],
            workExperience: [
              { required: true, message: '请输入工作经历', trigger: 'blur' }
            ]
          },
          disabled: false // 处理编辑，某些项禁止编辑
        },
        treeSelectProps(node) {
          return {
            id: node.id,
            label: node.label,
            children: node.children,
            isDefaultExpanded: false
          }
        },
        detailInfo: null
      }
    },
    props: {
      visible: {
        type: [Boolean],
        required: true,
        default: false
      },
      detailData: {
        type: Object,
        default() {
          return null
        }
      },
      departmentAllListData: { // 部门下拉列表
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      jobAllListData: { // 下拉的职位列表
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      educationAllListData: { // 学历下拉列表
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      politicalAllListData: { // 政治面貌下拉列表
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      marryAllListData: { // 婚姻状态下拉列表
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      nationAllListData: { // 民族下拉列表
        type: Array,
        required: true,
        default() {
          return []
        }
      }
    },
    computed: {},
    methods: {
      async resetEditData(data = null) { // 重置编辑表单
        this.editInfo.id = undefined
        this.editInfo.disabled = false
        this.editInfo.data = JSON.parse(JSON.stringify(this.formParams))
        if (data) { // 编辑
          // this.editInfo.id = data.uuid
          this.editInfo.id = data.id
          Object.keys(this.formParams).forEach((item) => {
            this.editInfo.data[item] = data[item]
          })
          this.editInfo.disabled = true
        }
      },
      async initData(data = null) { // 初始化数据
        await this.resetEditData(data)
        this.$nextTick(() => {
          this.$refs['editInfo'].clearValidate()
        })
      }
    },
    watch: {
      visible: {
        handler: function(newVal, oldVal) {
          if (newVal !== this.dialog.visible) {
            this.dialog.visible = newVal
            if (newVal) {
              this.initData(this.detailData)
            }
          }
        },
        immediate: true
      },
      detailData: {
        handler: function(newVal, oldVal) {
          this.initData(newVal)
        },
        deep: true,
        immediate: true
      },
      'editInfo.data': {
        handler: function(newVal, oldVal) {
          // console.log(newVal)
          this.$emit('on-input', newVal)
        },
        deep: true,
        immediate: true
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .edit-box {
    & /deep/ .el-dialog {
      min-width: 900px;
      max-width: 1200px;
    }

    & /deep/ .el-dialog__body {
      padding: 10px 20px 30px;
    }

    & /deep/ .el-tabs {
      .el-tabs__content {
        overflow: visible;
      }
    }
  }

  .editInfo {
    margin-right: 0;

    .el-cascader,
    .el-select {
      width: 100%;
    }
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 70px;
    height: 70px;
  }

  .el-upload--picture-card {
    width: 70px;
    height: 70px;
    line-height: 68px;
    display: none;
  }

  .el-upload-list--picture-card .el-upload-list__item-actions span + span {
    margin-left: 8px;
  }

</style>
